import { useRef } from 'react'
import './index.scss'
import useECharts from '@/utils/useECharts'
import { useEffect } from 'react'
import { getMovieEvaluationApi } from '@/api'
import { useState } from 'react'

function MovieEvaluation() {
  const evaluationRef = useRef(null)
  const [movieList, setMovieList] = useState([])
  const [comments, setComments] = useState([])

  useEffect(() => {
    const getMovieEvaluation = async () => {
      const res = await getMovieEvaluationApi()
      const filterMovieName = res.data.data
        .map(item => item.movie_name)
        .reverse()
      setMovieList(filterMovieName)
      const filterComments = res.data.data.map(item => item.comments).reverse()
      setComments(filterComments)
    }
    getMovieEvaluation()
  }, [])

  const option = {
    tooltip: {
      trigger: 'item'
    },
    yAxis: {
      type: 'category',
      data: movieList
    },
    xAxis: {
      type: 'value'
    },
    series: [
      {
        name: '评论数',
        data: comments,
        type: 'bar',
        label: {
          show: true,
          position: 'inside'
        }
      }
    ]
  }

  useECharts(evaluationRef, option)

  return (
    <>
      <div className="movie-evaluation">
        <h1>电影评价人数TOP20</h1>
        <div id="evaluation" ref={evaluationRef}></div>
      </div>
    </>
  )
}

export default MovieEvaluation
